<template>
  <div class="home">
    <canvas id="box"></canvas>
  </div>
</template>

<script>
/* eslint-disable */
// #应用与引擎配置 - 鼠标滚动直接缩放视图 [Leafer]
import { Leafer, Rect, Path, App, Line, MoveEvent, ZoomEvent, UIData } from "leafer-ui";
import "@leafer-in/viewport"; // 导入视口插件
import { AcLine } from "./Line2d";
export default {
  name: "HomeView",
  components: {},
  mounted() {
    const app = new App({
      view: "box",
      tree: { type: "design", wheel: { zoomMode: true } }, // 给 tree 层添加自定义视口  //
    });
    UIData.prototype.__getRealStrokeWidth = function () {
      let { strokeWidth } = this;
      const scale = this.__leaf.leafer.__world.scaleX;
      return strokeWidth / scale
    }

    const leafer = app.tree;
 
    // 需要自定义平移视图逻辑    //
    // app.tree.on(MoveEvent.BEFORE_MOVE, (e) => {
    //   const { x, y } = app.tree.getValidMove(e.moveX, e.moveY);
    //   app.tree.zoomLayer.move(x, y);
    // });

    leafer.add(
      new Rect({
        x: 150,
        y: 200,
        fill: "#32cd79",
        stroke: "#ff0000",
        draggable: true,
        strokeWidthFixed: "zoom-in",
      })
    );
    leafer.add(new Rect({ x: 280, y: 70, fill: "#32cd79", draggable: true }));

    const path = new Path({
      scale: 0.1,
      path: "M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z",
      fill: "#32cd79",
      draggable: true,
      strokeWidthFixed: "zoom-in",
    });

    leafer.add(path);

    const line = new Line({
      points: [200, 200, 5000, 6000],
      strokeWidth: 1,
      stroke: "#32cd79",
      strokeWidthFixed: "zoom-in",
    });
    leafer.add(line);
    const line2d = new AcLine({
      points: [200, 200, 3000, 6000],
      strokeWidth: 1,
      stroke: "#32cd79",
      strokeWidthFixed: "zoom-in",
      rawWidth: 1,
    });
    leafer.add(line2d);
    // console.log(leafer);
    // console.log(line2d);

    // console.log(leafer.__world.scaleX);

    // 需要自定义缩放视图逻辑
    // app.tree.on(ZoomEvent.BEFORE_ZOOM, (e) => {
    //   const ui = leafer;
    //   console.log(ui.__nowWorld, ui.__world);

    //   let { scaleX } = ui.__nowWorld || ui.__world;
    //   console.log(ui.__world.scaleX);

    //   // const center = { x: e.x, y: e.y };
    //   // console.log(line2d);

    //   // app.tree.zoomLayer.scaleOfWorld(center, app.tree.getValidScale(e.scale));
    // });
    app.tree.on(ZoomEvent.END, (e) => {
      const ui = leafer;
      let { scaleX } = ui.__nowWorld || ui.__world;
      // console.log(scaleX);
      // if (scaleX < 1) {
      //   line2d.strokeWidth = line2d.rawWidth / scaleX;
      // } else {
      //   line2d.strokeWidth = line2d.rawWidth;
      // }
      // line2d.strokeWidth = line2d.rawWidth / scaleX;
      // const center = { x: e.x, y: e.y };
      // console.log(line2d);
      // console.log(line2d.strokeWidth);

      // app.tree.zoomLayer.scaleOfWorld(center, app.tree.getValidScale(e.scale));
    });
  },
};
</script>
<style scoped>
.home {
  width: 90vw;
  height: 80vh;
  border: 1px solid #c56565;
}

#box {
  border: 1px solid #c56565;
}
</style>
